<template>
 <div class="header">
   <div class="title">医院信息管理</div>
   <div class="info">
     <el-dropdown>
       <el-button type="primary" style="border-radius: 50%;width: 50px;height: 50px;">
         {{store.state.user.userInfo.employeeName}}
       </el-button>
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item @click="getInfo">个人信息</el-dropdown-item>
           <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
         </el-dropdown-menu>
       </template>
     </el-dropdown>
   </div>
 </div>
</template>
<script setup>

//获取个人的信息
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { logoutReuqest } from "@/utils/api";
import { useStore } from "vuex";
const router = useRouter();
const store = useStore()
const getInfo = () => {
  router.push({
    path: "/home/updatemps",
    query: { id: store.state.user.userInfo. employeeId}
  });
}

//推出登录
const logout = async () => {
 let res = await logoutReuqest()
  if (res.data){
    ElMessage({
      type:"success",
      message:"退出成功"
    })
    sessionStorage.clear();
    router.push({
      path:'/'
    })

  }else {
    ElMessage({
      type:"error",
      message:"退出失败"
    })
  }
}

</script>
<style scoped>
.header{
  height: 60px;
  width: 100% ;

}
.header .title{

  letter-spacing:2px;
  font-size: 20px;
  font-weight: bold;
  float: left;
  line-height: 60px;
}
.header .info{
  float: right;
}

</style>